* {
  box-sizing: border-box;
}
body {
  background-color: #101129;
}
.viewport {
  min-width: 1024px;
  //   max-width: 1920px;
  min-height: 780px;
  margin: 0 auto;
  background: url(../images/logo.png);
  background-repeat: no-repeat;
  background-size: 24rem;
  display: flex;
  padding: 1.0875rem 0.25rem 0;
  color: red;
  vertical-align: middle;
  .panel {
    box-sizing: border-box;
    border: 0.025rem solid red;
    border-image: url(../images/border.png) 51 38 21 132;
    border-width: 0.65rem 0.475rem 0.25rem 1.6875rem;
    position: relative;
    margin-bottom: 0.25rem;
  }
  //   左
  .left {
    flex: 3;
    position: relative;
    // 不知道
    .left-1 {
      position: relative;
      height: 1.375rem;
      .inner {
        position: absolute;
        top: -0.625rem;
        right: -0.4875rem;
        left: -1.7rem;
        bottom: -0.25rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        padding: 0.3rem 0.4625rem;
        .item {
          flex: 1;
          h4 {
            padding: 0;
            margin: 0;
            font-size: 0.375rem;
            color: #fff;
            font-weight: normal;
          }
          span {
            font-size: 0.2rem;
            line-height: 0.4125rem;
            color: rgb(76, 155, 253);
            .icon-dot {
              font-family: "icomoon" !important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
            }
          }
        }
      }
    }
    // 监控
    .left-2 {
      position: relative;
      height: 5.9375rem;
      .tabs {
        position: relative;
        padding: 0 0.4625rem;
        color: #fff;
        display: block;
        padding: 0 0.225rem;
        border: 1ox solid #00f2f1;
        font-size: 0.25rem;
        margin-bottom: 0.225rem;
        z-index: 999;
        .bao {
          color: rgb(25, 80, 161);
        }
        span {
          margin-right: 0.3375rem;
        }
        :nth-child(2) {
          margin-left: 0.3375rem;
        }
      }
      .swiper {
        position: absolute;
        top: -0.65rem;
        right: -0.4875rem;
        bottom: -0.2625rem;
        left: -1.7rem;
        padding: 0.3rem 0.075rem;
        .sho {
          color: rgb(104, 216, 255);
          background-color: rgb(40, 41, 63);
          // ::after {
          //   cursor: "";
          //   width: 12px;
          //   height: 12px;
          //   // background-color: ;
          // }
        }
        .head {
          position: relative;
          display: flex;
          justify-content: space-between;
          padding: 0.15rem 0.4625rem;
          background-color: rgb(40, 41, 63);
          color: rgb(75, 200, 254);
          z-index: 999;
        }
        .swiper1 {
          height: 4.1125rem;
          overflow: hidden;
          .swiper-wrapper {
            padding: 0;
            margin: 0;
            overflow: hidden;
            z-index: 0;
            li {
              color: rgb(97, 168, 255);
              padding: 0.1875rem 0.4625rem;
              height: 0.55rem;
              display: flex;
              justify-content: space-between;
            }
          }
        }
        .xian {
          display: block;
        }
      }
    }
    // 点位
    .left-3 {
      position: relative;
      height: 4.3rem;
      .inner {
        position: absolute;
        top: -0.65rem;
        right: -0.4875rem;
        left: -1.7rem;
        bottom: -0.2625rem;
        padding: 0.3rem 0.4625rem;
        h3 {
          font-size: 0.25rem;
          font-weight: normal;
          color: #fff;
        }
        .chart {
          width: 6.125rem;
          height: 3.1rem;
          display: flex;
          margin-top: 0.3rem;
          .pie {
            width: 3.75rem;
            height: 3rem;
            margin-left: 0.1125rem;
          }
          .data {
            width: 2.1625rem;
            padding: 0.4625rem 0.3875rem;
            background-image: url(../images/rect.png);
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          .item {
            h4 {
              padding: 0;
              margin: 0;
              font-size: 0.375rem;
              font-weight: normal;
              color: #fff;
              margin-bottom: 0.15rem;
            }
            span {
              font-size: 0.1875rem;
              color: #4c9bfd;
            }
          }
        }
      }
    }
  }
  //   中
  .content {
    flex: 4;
    margin: 0.4rem 0.375rem 0;
    .map {
      width: 9.375rem;
      height: 7.4625rem;
      h3 {
        padding: 0.2rem 0;
        font-size: 0.2625rem;
        color: #fff;
        margin: 0;
      }
      .chart {
        width: 100%;
        height: 6.75rem;
      }
    }
    // 用户
    .users {
      position: relative;
      height: 4.25rem;
      .inner {
        position: absolute;
        top: -0.65rem;
        right: -0.4875rem;
        left: -1.7rem;
        bottom: -0.2625rem;
        padding: 0.3rem 0.4625rem;
        h3 {
          padding: 0;
          margin: 0;
          font-size: 0.25rem;
          color: #fff;
          font-weight: normal;
        }
        .chart {
          margin-top: 0.3rem;
          width: 8.475rem;
          height: 3.1rem;
          display: flex;
          .bar {
            width: 6.35rem;
            height: 3.1rem;
          }
          .data {
            width: 2.2125rem;
            height: 3.1rem;
            background: url(../images/rect.png);
            background-repeat: no-repeat;
            padding: 0.4625rem 0.3875rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item {
              h4 {
                padding: 0;
                margin: 0;
                color: #fff;
                font-size: 0.3125rem;
                font-weight: normal;
                margin-bottom: 0.15rem;
              }
              span {
                color: #4c9bf4;
                font-size: 0.2rem;
              }
            }
          }
        }
      }
    }
    .chart {
      width: 9.375rem;
      //   height: 6.775rem;
    }
  }
  //   右
  .right {
    flex: 3;
    // 1
    .order {
      position: relative;
      height: 1.875rem;
      .show {
        font-size: 0.25rem !important;
        color: #fff !important;
      }
      .inner {
        position: absolute;
        top: -0.65rem;
        right: -0.4875rem;
        left: -1.7rem;
        bottom: 0.2625rem;
        padding: 0.3rem 0.4625rem;
        .filter {
          display: flex;
          :nth-child(4) {
            border-right: 0;
          }
          a {
            // width: 0.975rem;
            height: 0.225rem;
            display: block;
            padding: 0 0.225rem;
            font-size: 0.225rem;
            border-right: 0.0125rem solid #00f2f1;
            color: #1950c4;
          }
          :nth-child(1) {
            padding: 0 0.225rem 0 0;
          }
        }
        .data {
          margin-top: 0.25rem;
          display: flex;
          .item {
            width: 50%;
            h4 {
              padding: 0;
              margin: 0;
              color: #fff;
              font-size: 0.375rem;
              font-weight: normal;
              margin-bottom: 0.125rem;
            }
            span {
              font-size: 0.2125rem;
              color: #4c9bfd;
            }
          }
        }
      }
    }
    // <!-- 销售 -->
    .sales {
      position: relative;
      height: 3rem;
      .inner {
        position: absolute;
        top: -0.65rem;
        right: -0.4875rem;
        bottom: -0.2625rem;
        left: -1.7rem;
        padding: 0.3rem 0.4875rem;
        .caption {
          width: 6.125rem;
          height: 0.2625rem;
          display: flex;
          h3 {
            padding: 0;
            margin: 0;
            font-size: 0.225rem;
            font-weight: normal;
            color: #fff;
            padding-right: 0.225rem;
            border-right: 0.0125rem solid #00f2f1;
          }
          .active {
            background-color: #4c9bfd;
            color: #fff;
            line-height: 0.2125rem;
            border-radius: 0.0625rem;
          }
          a {
            font-size: 0.225rem;
            padding: 0.05rem;
            color: #0bace6;
            margin: -0.0375rem 0 0 0.2625rem;
          }
        }
        .line {
          position: relative;
          width: 6.125rem;
          height: 2.1375rem;
          .label {
            position: absolute;
            top: 0.125rem;
            left: 0.5375rem;
            font-size: 0.175rem;
            color: rgb(73, 150, 245);
          }
          .lb {
            width: 6.125rem;
            height: 2.1375rem;
          }
        }
      }
    }
    //  <!-- 渠道 季度 -->
    .wrap {
      height: 3.25rem;
      display: flex;
      .channel {
        position: relative;
        flex: 1;
        height: 2.875rem;
        margin-right: 0.25rem;
        .inner {
          position: absolute;
          top: -0.65rem;
          right: -0.4875rem;
          bottom: -0.2625rem;
          left: -1.7rem;
          padding: 0.3rem 0.4625rem;
          h3 {
            padding: 0;
            margin: 0;
            color: #fff;
            font-size: 0.25rem;
            font-weight: normal;
          }
          .data {
            width: 2.475rem;
            height: 1rem;
            display: flex;
            justify-content: space-around;
            .item {
              width: 0.7875rem;
              height: 0.7375rem;
              margin-top: 0.2625rem;
              h4 {
                padding: 0;
                margin: 0;
                color: #fff;
                font-size: 0.3125rem;
                font-weight: normal;
                margin-bottom: 0.0625rem;
              }
              span {
                color: rgb(76, 155, 253);
                font-weight: 0.2rem;
              }
            }
          }
        }
      }
      .quarter {
        position: relative;
        flex: 1;
        height: 2.875rem;
        .inner {
          position: absolute;
          top: -0.65rem;
          right: -0.4875rem;
          bottom: -0.2625rem;
          left: -1.7rem;
          padding: 0.3rem 0.4625rem;
          h3 {
            padding: 0;
            margin: 0;
            font-size: 0.2125rem;
            color: #fff;
            font-weight: normal;
          }
          .gauge {
            padding-top: 0.225rem;
            width: 100%;
            height: 1.25rem;
          }
          .label {
            position: absolute;
            top: 1.125rem;
            left: 1.3625rem;
            font-size: 0.3125rem;
            color: #fff;
          }
        }
        .data {
          width: 2.6375rem;
          height: 0.6875rem;
          display: flex;
          .item {
            width: 50%;
            h4 {
              padding: 0;
              margin: 0;
              font-size: 0.35rem;
              color: #fff;
              font-weight: normal;
              margin-bottom: 0.1125rem;
            }
            span {
              color: #4c9bfd;
              font-size: 0.1875rem;
            }
          }
        }
      }
    }
    // 排行榜
    .top {
      position: relative;
      height: 3.65rem;
      .inner {
        position: absolute;
        top: -0.65rem;
        right: -0.4875rem;
        left: -1.7rem;
        bottom: -0.2625rem;
        padding: 0.3rem 0.4875rem;
        display: flex;
        .all {
          width: 2.1625rem;
          height: 3.05rem;
          display: flex;
          flex-direction: column;
          vertical-align: middle;
          h3 {
            padding: 0;
            margin: 0;
            font-weight: normal;
            font-size: 0.2875rem;
            color: #fff;
          }
          ul {
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-top: 0.15rem;
            padding-left: 0.15rem;
            flex: 1;
            vertical-align: middle;
            li {
              position: relative;
              vertical-align: top;
              color: #4c9bfd;
              span {
                position: absolute;
                top: 0.175rem;
                display: inline-block;
                line-height: 10px;
              }
              i {
                margin-right: 12px;
                font-size: 0.4625rem;
              }
            }
          }
        }
        .province {
          position: relative;
          width: 3.9625rem;
          height: 3.05rem;
          flex: 1;
          display: flex;
          flex-direction: column;
          color: #fff;
          h3 {
            padding: 0;
            margin: 0;
            font-size: 0.2875rem;
            font-weight: normal;
            .date {
              font-size: 0.1875rem;
              color: #0bace6;
              position: absolute;
              right: 0;
            }
          }
          .data {
            width: 3.9625rem;
            height: 2.625rem;
            margin-top: 0.175rem;
            display: flex;
            .sup {
              padding: 0;
              margin: 0;
              width: 1.975rem;
              height: 2.55rem;
              font-size: 0.1625rem;
              display: flex;
              flex-direction: column;
              margin-bottom: 0.075rem;
              .bao {
                color: #a3c6f2;
                background-color: rgba(10, 67, 188, 0.2);
              }
              .zaijian {
                color: #a3c6f2;
                background-color: rgba(10, 67, 188, 0.2);
              }
              li {
                display: flex;
                justify-content: space-around;
                color: #4995f4;
                flex: 1;
                line-height: 0.5375rem;
                .icon-down {
                  color: #36be90;
                }
                .icon-up {
                  color: #f00;
                }
              }
            }
            .sub1 {
              position: relative;
              .active {
                opacity: 1 !important;
                z-index: 99999;
              }
              .nihao {
                opacity: 1 !important;
                z-index: 99999;
              }
              .sub {
                position: absolute;
                // opacity: 0;
                padding: 0;
                margin: 0;
                width: 1.9875rem;
                height: 2.625rem;
                background-color: rgba(10, 67, 188, 0.2);
                margin-bottom: 0.075rem;
                display: flex;
                flex-direction: column;
                li {
                  display: flex;
                  justify-content: space-around;
                  color: #52ffff;
                  line-height: 0.45rem;
                  .icon-up {
                    color: #f00;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
